{% load static %}
    <link rel="stylesheet" href="{% static 'css/font-awesome.css'  %}">
    <link rel="stylesheet" href="{% static 'css/head_pic.css'  %}">
    <script src="{% static 'plugins/jquery/jquery.min.js' %}"></script>
    <script src="{% static 'plugins/jquery-ui/jquery-ui.min.js' %}"></script>
    <script src="{% static 'plugins/layui/layui.js' %}"></script>
{% block content %}
<div style="width: 100%">
    <div class="imageBox">
        <div class="thumbBox"></div>
        <div class="spinner" style="display: none">Loading...</div>
    </div>
		  <div class="action">
		    <div class="new-contentarea tc">
		    	<a href="javascript:void(0)" class="upload-img">
		      		<label for="upload-file">上传图像</label>
		      </a>
		      <input type="file" class="" name="upload-file" id="upload-file" />
		    </div>
		    <input type="button" id="btnCrop"  class="Btnsty_peyton" value="裁切">
		    <input type="button" id="btnZoomIn" class="Btnsty_peyton" value="+"  >
		    <input type="button" id="btnZoomOut" class="Btnsty_peyton" value="-" >
		    <input type="button" id="save" class="Btnsty_peyton" style="margin-top: 5px;width: 100%;margin-bottom: 5px;" value="保存" >
		  </div>
		  <div class="cropped"></div>
		</div>

{% block custom_js %}
<script type="text/javascript" src="{% static 'js/cropbox.js' %}"></script>
<script type="text/javascript">
$.ajaxSetup({
    data: {csrfmiddlewaretoken: '{{ csrf_token }}' },
});
    // 头像裁减模块
	$(window).on('load',function() {
		var options =
		{
			thumbBox: '.thumbBox',
			spinner: '.spinner',
            // 设置默认的白色图片，初始化容器
			imgSrc: '{% static "images/head_pic/default.jpg" %}',
		}
		var cropper = $('.imageBox').cropbox(options);
		$('#upload-file').on('change', function(){
			var reader = new FileReader();
			reader.onload = function(e) {
				options.imgSrc = e.target.result;
				cropper = $('.imageBox').cropbox(options);
			}
			reader.readAsDataURL(this.files[0]);
			this.files = [];
		})
		$('#btnCrop').on('click', function(){
			var img = cropper.getDataURL();
			$('.cropped').html('');
			$('.cropped').append('<img src="'+img+'" align="absmiddle" style="width:64px;margin-top:4px;border-radius:64px;box-shadow:0px 0px 12px #7E7E7E;" ><p>64px*64px</p>');
			$('.cropped').append('<img src="'+img+'" align="absmiddle" style="width:128px;margin-top:4px;border-radius:128px;box-shadow:0px 0px 12px #7E7E7E;"><p>128px*128px</p>');
			$('.cropped').append('<img src="'+img+'" align="absmiddle" style="width:180px;margin-top:4px;border-radius:180px;box-shadow:0px 0px 12px #7E7E7E;"><p>180px*180px</p>');
		})
		$('#btnZoomIn').on('click', function(){
			cropper.zoomIn();
		})
		$('#btnZoomOut').on('click', function(){
			cropper.zoomOut();
		})
        // 自定义函数，保存裁减后的BASR64头像
        $("#save").click(function () {
            var img = cropper.getDataURL();
            //alert(img)
            $.ajax({
                type: "post",
                url: "{% url 'login:head_pic' %}",
                async: false,
                data:{
                    'head_pic': img,  //裁减后的base64图像，直接传入然后保存
                },
                success: function (data) {
                    if(data.status === 1){
                    //操作成功
                    layui.use('layer',function () {
                        var layer=layui.layer;
                        info = data.info
                        layer.alert(info,{
                            icon: 6,
                            skin: 'layer-ext-moon',
                            offset: 't',
                            yes: function () {
                                window.location.reload();
                            }
                        })
                    })
                }else {
                //操作失败
                    layui.use('layer',function () {
                        var layer=layui.layer;
                        info = data.info
                        layer.alert(info,{
                            icon: 0,
                            skin: 'layer-ext-moon',
                            offset: 't',
                            yes: function () {
                                parent.layer.closeAll()
                            }
                        })
                    })
                }
                }
            });
        })
	});
</script>
{% endblock %}
{% endblock %}